<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#GAME {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
			.Game {
				width: 150px; height: 150px;
				
				transition: 1s;
				transform-style: preserve-3d;
				margin: 10px auto;
			}
			#menu:hover {
				transform: rotateX(90deg);
			}
			.Game div {
				width: 150px; height: 150px;
				font: 50px/150px "";
				color: #fff;
				text-align: center;
				background-color: #222222;
				position: absolute;left: 0; top: 0;
				
			}
			.Game div:nth-child(1) {
				transform: translatez(75px);
			}
			.Game div:nth-child(2) {
				transform: translatey(75px) rotatex(-90deg);
			}
			.Game div:nth-child(3) {
				transform: translatez(-75px) rotatey(180deg);
			}
			.Game.Game div:nth-child(4) {
				transform: translatey(-75px) rotatex(90deg);
			}
			.Game.Game div:nth-child(5) {
				transform: translatex(-75px) rotatey(-90deg);
			}
			.Game.Game div:nth-child(6) {
				transform: translatex(75px) rotatey(90deg);
			}
			
			#game2:hover {
				transform: rotateX(90deg);
			}
			#game3:hover {
				transform: rotatey(180deg);
			}
			#game4:hover {
				transform: rotateX(-90deg);
			}
			#game5:hover {
				transform: rotatey(90deg);
			}
			#game6:hover {
				transform: rotatey(-90deg);
			}
		</style>
	</head>
	<body>
		<div id="menu" class="Game">
			<div>迎宾</div>
			<div>骰子</div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div id="GAME">
			<div id="game1" class="Game">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
			<div id="game2" class="Game">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
			<div id="game3" class="Game">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
			<div id="game4" class="Game">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
			<div id="game5" class="Game">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
			<div id="game6" class="Game">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
		</div>
	</body>
</html>
